<template>
	<view class="page">
		<view class="page-date">
			<view class="page-date__left">时间段查询：</view>
			<view class="page-date__right">
				<view class="page-date__right--item" @click="startVisible = true">{{startdate}}</view>
				<view class="page-date__right--center">-</view>
				<view class="page-date__right--item" @click="endVisible = true">{{enddate}}</view>
			</view>
		</view>
		<view class="list" v-for="(item,index) in list" :key="item.SubjectId" @click="selectSubject(item)">
			<view class="list__left">
				<image class="list__left--image" :src="item.image"/>
			</view>
			<view class="list__right">
				<view class="list__right--top">
					<view class="list__right--top-title">{{item.SubjectTitle}}</view>
					<view class="list__right--top-des">{{item.CoverContent}}</view>
				</view>
				<view class="list__right--bottom">{{item.time}}</view>
			</view>
		</view>
		<view v-if="noData">
			<no-data></no-data>
		</view>
		<view v-if="noMore">
		  <view class="loading-more" style="height: 80rpx;">
		    <text class="loading-more__text">{{loadingText}}</text>
		  </view>
		</view>
		
		<u-datetime-picker
			:show="startVisible"
			v-model="defaultstartdate"
			mode="date"
			@confirm="startConfirm"
			@close="startVisible = false"
			@cancel="startVisible = false"
		></u-datetime-picker>
		<u-datetime-picker
			:show="endVisible"
			v-model="defaultenddate"
			mode="date"
			@confirm="endConfirm"
			@close="endVisible = false"
			@cancel="endVisible = false"
		></u-datetime-picker>
	</view>
</template>

<script>
	import _data from '@/common/_data.js'
	import _custom from '@/common/_custom.js'
	import moment from 'moment';
	import { formatImg,timestampFormat,entitiestoUtf16 } from '@/common/custom_util';
	import DefaultSubject from '@/static/theme/default/community/tiezi.png';
	import NoData from '@/components/custom/no-data/no-data.vue'
	
	export default {
		components: {
			NoData
		},
		data() {
			return {
				code: '',
				list: [],
				startdate: moment().format('YYYY-MM-DD'),
				defaultstartdate: moment().format('YYYY-MM-DD'),
				enddate: moment().format('YYYY-MM-DD'),
				defaultenddate: moment().format('YYYY-MM-DD'),
				startVisible: false,
				endVisible: false,
				currentpage: 1,
				pagesize: 10,
				noData: false,
				noMore: false,
				loadingText: '没有更多了'
			}
		},
		onLoad(options) {
			this.code = options.code;
			this.getSubjectForwardList();
		},
		methods: {
			/**
			 * 获取转发贴子的模块内关联的帖子列表
			 */
			getSubjectForwardList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSubjectForwardList',
					currentpage: this.currentpage,
					pagesize: this.pagesize,
					apiparam: {
						forwardcode: this.code,
						startdate: this.startdate,
						enddate: this.enddate
					},
					success(res) {
						if(res.length < that.pagesize) that.noMore = true;
						if(that.currentpage == 1 && !res.length) {
							that.noMore = false;
							that.noData = true;
							return
						}
						res.forEach(item => {
							item.SubjectTitle = entitiestoUtf16(item.SubjectTitle);
							item.CoverContent = entitiestoUtf16(item.CoverContent);
							item.time = timestampFormat(item.CreateTime);
							item.image = item.DefaultImage ? formatImg(item.DefaultImage,false) : DefaultSubject;
							console.log(item.image)
						})
						that.list.push(...res);
					}
				})
			},
			init() {
				this.noMore = false;
				this.noData = false;
				this.currentpage = 1;
				this.list = [];
			},
			startConfirm(v) {
				this.startdate = moment(v.value).format('YYYY-MM-DD');
				this.startVisible = false;
				this.init();
				this.getSubjectForwardList();
			},
			endConfirm(v) {
				this.enddate = moment(v.value).format('YYYY-MM-DD');
				this.endVisible = false;
				this.init();
				this.getSubjectForwardList();
			},
			selectSubject(v) {
				uni.navigateTo({
					url: '/pages/community/subject-view?businessId=' + v.SubjectId
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #fff;
		
		&-date {
			display: flex;
			align-items: center;
			height: 150rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eee;
			
			&__left {
				width: 200rpx;
			}
			
			&__right {
				display: flex;
				
				&--item {
					padding: 10rpx 20rpx;
					background-color: #eee;
					border-radius: 20rpx;
				}
				
				&--center {
					margin: 0 20rpx;
					font-size: 40rpx;
				}
			}
			
		}
	}
	
	.list {
		height: 240rpx;
		background-color: #fff;
		display: flex;
		padding: 20rpx;
		box-sizing: border-box;
		width: 100%;
		
		&__left {
			width: 270rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #65B0FF;
			border-radius: 5rpx;
			
			&--image {
				width: 100%;
				height: 100%;
				border-radius: 5rpx;
			}
		}
		
		&__right {
			width: calc(100% - 290rpx);
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			&--top {
				width: 100%;
				
				&-title {
					width: 100%;
					overflow:hidden; //超出的文本隐藏
					text-overflow:ellipsis; //溢出用省略号显示
					white-space:nowrap; //溢出不换行
					font-size: 30rpx;
				}
				
				&-des {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					display:-webkit-box; //作为弹性伸缩盒子模型显示。
					-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
					-webkit-line-clamp:2; //显示的行
					font-size: 25rpx;
					color: #999;
				}
			}
			
			&--bottom {
				text-align: right;
				font-size: 25rpx;
				color: #aaa;
			}
		}
	}
	
	.loading-more {
		display: flex;
		flex-direction: row; 
		justify-content: center;
		height: 80rpx;
		align-items: center;
		background-color: #F4F5F6;
		
		&__text {
			font-size: 27rpx;
			color: #aaa;
		}
	}
</style>
